<template>
	<view class="pages">
		<!-- 密码 -->
		<uni-popup ref="psdPopup" type="center" :animation="true" @change="changePopup($event,'psdPopup')">
			<view class="modal">
				<view class="modal-wrapper">
					<view class="psdBox">
						<view class="psdBox-wrapper">
							<view class="psdBox-header">请输入交易密码</view>
							<view class="psdBox-input">
								<input type="password" v-model="password" placeholder="请输入交易密码" placeholder-class="inputStyle">
							</view>
							<view class="psdBox-btnBox">
								<view class="psdBox-close" @tap="hidePopup('psdPopup')">取消</view>
								<view class="psdBox-confirm" @tap.stop="$u.throttle(psdSubmit,1000)">确定</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 提现方式选择 -->
		<uni-popup ref="bankPopup" type="bottom" :animation="true" @change="changePopup($event,'bankPopup')">
			<view class="bank-list-block">
				<!-- <view class="bank-close-icon" @tap="selectbankstatus = false"></view> -->
				<view class="bank-list-msg-block">
					<view class="bank-list-msg" v-for="(item,index) in bankList"
						:key="index" @tap.stop="choosebank(item,index)">
						<view class="bank-list-msg-arr">
							<view class="bank-msg-text">
								<view class="bank-icon">
                  <image class="img" v-if="item.type==1" src="@/static/public/wechat.png" mode=""></image>
                  <image class="img" v-if="item.type==2" src="@/static/public/alipay.png" mode=""></image>
                  <image class="img" v-if="item.type==3" src="@/static/public/bank.png" mode=""></image>
                </view>
								<view class="bank-name">
									{{item.withdrawalAccount}}
								</view>
							</view>
							<view class="bank-choose-active" v-if="currIndex == index">
              </view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 图片展示 -->
		<uni-popup ref="bankImgPopup" type="center" :animation="true" @change="changePopup($event,'bankPopup')">
			<image class="accountModelImg" :src="chooseBank.bankCardName" mode="widthFix"></image>
		</uni-popup>
		<!-- 头部 -->
		<view class="header_bar ">
			<view class="header">
				<view class="header-goBack" @tap.stop="backMethd()"></view>
				<view class="header-title">提现</view>
				<view class="header-right" @tap.stop="$tools.jump('./withdrawalRecords')">
				提现记录
				</view>
			</view> 
		</view> 
		<!-- <view class="info">
			<view class="title">
				<text class="line"></text>请选择余额或消费券提现
			</view>
			<view class="tab">
				<view :class="['item',tabIndex==0?'active':'']" @tap.stop="changeTap(0,1)">余额</view>
				<view :class="['item',tabIndex==1?'active':'']" @tap.stop="changeTap(1,2)">消费券</view>
			</view>
		</view> -->
		<view class="group-box">
			<view class="group">
				<view class="label">提现至：</view>
				<view class="right" @tap.stop="selectbank">
					<view class="select">
						<view class="text" v-if="chooseBank.type==1">
							微信 <image class="img" src="@/static/public/wechat.png" mode=""></image>
						</view>
						<view class="text" v-if="chooseBank.type==2">
							支付宝 <image class="img" src="@/static/public/alipay.png" mode=""></image>
						</view>
						<view class="text" v-if="chooseBank.type==3">
							银行卡 <image class="img" src="@/static/public/bank.png" mode=""></image>
						</view>
						<view class="text" v-if="chooseBank.type==''">请选择</view>
					</view>
					<image class="ico" src="@/static/public/icon-next-back.png" mode=""></image>
				</view>
			</view>
			<view class="group">
				<view class="label">可用{{tabIndex==0?'余额':'消费券'}}：</view>
				<view class="des">{{tabIndex==0?userMoney.validNum1:userMoney.validNum2}}</view>
			</view>
			<view class="group">
				<view class="label">提现金额：</view>
				<view class="right">
					<input type="number" v-model="num" placeholder="请输入提现数量">
				</view>
      </view>
      <view class="group">
        <view class="label">手续费：</view>
        <view class="des">{{feeNum}}</view>
      </view>
		</view>

		<view class="group-box">
			<view class="group" v-if="chooseBank.type==1">
				<view class="label">微信号 ：</view>
				<view class="title">{{chooseBank.withdrawalAccount}}</view>
			</view>
			<view class="group" v-if="chooseBank.type==2">
				<view class="label">支付宝号 ：</view>
				<view class="title">{{chooseBank.withdrawalAccount}}</view>
			</view>
			<view class="group" v-if="chooseBank.type==3">
				<view class="label">银行账号 ：</view>
				<view class="title">{{chooseBank.withdrawalAccount}}</view>
			</view>
			<view class="group" v-if="chooseBank.type==1 || chooseBank.type==2">
				<view class="label">收款码：</view>
				<view class="des">
					<view class="accountImg-box">
						<image class="accountImg" @tap.stop="openPopup('bankImgPopup');" :src="chooseBank.bankCardName" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="initBtn" @tap.stop="$u.throttle(confirm,1500)">提现</view>
		
	</view>
</template>

<script>
	export default {
		components:{
		},
		data(){
			return{
				isFocus: null,
				toggle: true,
				address: '',
				num: '',
				password: '',
				waysActive: 0,
				userMoney: {},
				userInfo: {},
				systemParam: {},
				bankList: [
          {id:1,account_name:'微信',type:1,},
          {id:2,account_name:'支付宝',type:2,},
          {id:3,account_name:'银行卡',type:3,},
        ],
				tabIndex:0,
				currIndex:0,
        coinType:1,
				chooseBank:{type:''},
				backName:''
			}
		},
		computed: {
			getType(){
				return function(type){
					switch (type){
						case 1:
							return '微信';
							break;
						case 2:
							return '支付宝';
							break;
						case 3:
							return '银行卡';
							break;
					}
				}
			},
      feeNum(){
        let sum = 0
        if(this.num){
          sum  = (this.num * Number(this.systemParam.WITHDRAWAL_FEE_RADIO)).toFixed(2)
        }
        return sum
      }
		},
		onLoad(options) {
			console.log(options)
			if(options.value1){ // 返回页面
				this.backName = options.value1
			}
			// if(options.value2){  // 选择的收款方式
			// 	this.chooseBank = JSON.parse(options.value2)
			// }
			console.log('backName',this.backName,',chooseBank',this.chooseBank)
		},
		onHide() {
			uni.removeStorageSync('chooseBank')
		},
		onShow() {
			this.init();
			console.log(this.userInfo)
			// if(this.userInfo.isReal==0){
			// 	this.$tools.jump('/pages/user/useridcomfrim','实名认证');
			// }
			if(uni.getStorageSync('chooseBank')){
				this.chooseBank = JSON.parse(uni.getStorageSync('chooseBank'))
			}
			console.log('backName',this.backName,',chooseBank',this.chooseBank)
		},
		methods: {
			init(){
				this.getUserInfo();
				this.getUserMoney();
				this.getSystemParam();
				this.getAllUserPayment();
			},
			confirm() {
				// console.log(this.userInfo)
				// if(this.userInfo.isReal==0){
				// 	return this.$tools.toastJump('请先实名认证','/pages/user/useridcomfrim','实名认证');
				// }
				if(!this.userInfo.payPwd){
					return this.$tools.toastJump('请设置交易密码','/pages/setup/editPayPsd');
				}
				if(this.bankList.length<=0){
					return this.$tools.toastJump('请绑定收款方式','/pages/setup/payment','收款信息');
				}
				if (this.num == '' ) {
					return this.$tools.toast('请输入数量');
				}
				if(Number(this.num) <= 0){
					return this.$tools.toast('请输入正确的提现数量');
				}
				if(Number(this.num) < Number(this.systemParam.WITHDRAWAL_MIN_LIMIT)){
					return this.$tools.toast('提现数量最低为'+this.systemParam.WITHDRAWAL_MIN_LIMIT);
				}
				// if (Number(this.num) > this.userMoney.validNum2) {
				// 	return this.$tools.toast('余额不足');
				// }
				if (this.chooseBank.type == 0) {
					return this.$tools.toast('请选择提现方式');
				}
				this.openPopup('psdPopup');
			},
			psdSubmit(){
				if(this.password == ''){
					return this.$tools.toast('请输入交易密码');
				}
				if(this.toggle){
					this.toggle = false;
					var data = {
            type:this.chooseBank.type,
            changeBalance:this.num,
            payPwd:this.$md5(this.password),
            coinType:this.coinType,
          };
					console.log("data:",data);
					this.$Ajax('/api/money/addWithdrawal',data,res => {
							if (res.code == 200) {
								this.hidePopup('psdPopup');
                this.$tools.toastJump('操作成功','./withdrawalRecords');
								this.waysActive = 0;
								this.num = '';
								this.password = '';
								this.toggle = true;
							}else{
							} 
						},err => {
							this.toggle = true;
						}
					)
				}
			},
      // 获取收款方式	
			getAllUserPayment() {
				var data = {};
				this.bankList = [];
				console.log("data：",data);
				this.$Ajax('/api/money/getWithdrawalBindInfo',data,res => {
						if(res.code == 200){
							this.bankList = res.data;
						}
					}, err => {
					}, 'GET'
				)
			},		
			checkWaysActive(index){
				if(this.waysActive != index){
					this.waysActive = index;
				}
			},
			changeTap(index,type){
				if(this.tabIndex !=index){
					this.tabIndex = index
          this.coinType = type
				}
			},
			selectbank() {
				if(this.bankList.length<=0){
					return this.$tools.toastJump('请绑定收款方式','/pages/setup/payment',1);
				}else{
					// this.openPopup('bankPopup');
					this.$tools.jump('/pages/setup/payment',this.backName,2);
				}
			},
			choosebank(item,index) {
				this.currIndex = index;
				this.chooseBank = item
        this.hidePopup('bankPopup');
			},
			backMethd(){
				console.log('backName',this.backName)
				if(this.backName=='balance'){
					this.$tools.jump('/pages/balance/balanceRecord',1,'积分券')
				}else{
					this.$tools.jump('/pages/balance/balanceRecord',2,'消费券')
				}
			},
			/* clear & eye */
			focusInput(index) {
				this.isFocus = index;
			},
			blurInput(index) {
				this.isFocus = null;
			},
			clearData(keyName) {
				for (var key in this.$data) {
					if (key == keyName) {
						this.$data[key] = '';
					}
				}
			},
			/* 弹出框公用 */
			openPopup(e, item) {
				this.popupInfo = item;
				this.$refs[e].open();
			},
			hidePopup(e) {
				this.$refs[e].close();
				this.password = '';
			},
			changePopup(e) {
				console.log('popup ' + e.type + ' 状态', e.show);
			},
		}
	}
</script>

<style lang="scss" scoped>
.info{
	width: 93.6%;
	margin: auto;
	margin-top: 20rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 32rpx 20rpx;
	.title{
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		line-height: 44rpx;
		.line{
			display: inline-block;
			width: 12rpx;
			height: 40rpx;
			background: #EE3A33;
			border-radius: 62rpx;
			margin-right: 14rpx;
			vertical-align: middle;
		}
	}
	.tab{
			@include flexLeft;
			margin-top: 32rpx;
			.item{
				width: 204rpx;
				text-align: center;
				height: 88rpx;
				line-height: 88rpx;
				background: #FFEFEA;
				border-radius: 12rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #EE3A33;
				margin-right: 24rpx;
			}
			.active{
				background: #EE3A33;
				color: #fff;
			}
		}
}
.group-box{
	width: 93.6%;
	margin: auto;
	margin-top: 20rpx;
	background: #fff;
	border-radius: 20rpx;
	padding: 0 20rpx;
	.group{
		@include flexLeft;
		padding: 32rpx;
		border-bottom: 1px solid #E9E9E9;
	}
	.group:nth-last-of-type(1){
		border-bottom: none;
	}
	.label{
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		width: 200rpx;
	}
	.des{
		color: #999;
		font-size: 32rpx;
		width:calc(100% - 200rpx);
	}
	.right{
		@include flexBetween;
		width:calc(100% - 200rpx);
	}
	.text,.title,input{
		@include flexLeft;
		font-size: 28rpx;
		color: rgba(0,0,0,0.9);
		line-height: 48rpx;
	}
	.img{
		width: 48rpx;
		height: 48rpx;
		margin-left: 16rpx;
	}
	.ico{
		width: 32rpx;
		height: 32rpx;
	}
	.accountImg-box{
		width: 160rpx;
		height: 160rpx;
		background: #F9F9F9;
		border-radius: 8rpx;
		padding: 8rpx 26rpx;
		overflow: hidden;
	}
	.accountImg{
		width: 100%;
		height: 100%;
		margin: auto;
	}
}
.initBtn{
	width: 93.6%;
	margin: auto;
	margin-top: 20rpx;
}

.bank-list-block {
	width: 750rpx;
	height: 600rpx;
	background: #FFFFFF;
	position: relative;

	.bank-close-icon {
		width: 40rpx;
		height: 40rpx;
		background-size: 100% 100%;
		position: absolute;
		top: 63rpx;
		left: 40rpx;
		z-index: 3;
	}

	.bank-title {
		width: 100%;
		padding: 0 24rpx;
		font-size: 24rpx;
		margin-top: 32rpx;
		// border-bottom: 1rpx solid #E5E5E5;
		@include flexBetween;
		.sure{
			color: #AD2926;
		}
	}

	.bank-list-msg-block {
		width: 100%;
		.bank-list-msg {
			width: 100%;
			padding: 0 24rpx;
			.bank-list-msg-arr {
				// width: 95%;
				padding: 32rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				align-self: flex-end;
				border-bottom: 1rpx solid #E5E5E5;

				.bank-msg-text {
					display: flex;
					align-items: center;

					.img{
						width: 48rpx;
						height: 48rpx;
					}
					.bank-name {
						font-size: 32rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #333333;
						margin-left: 30rpx;
					}
				}

				.bank-choose-active {
					width: 40rpx;
					height: 40rpx;
					background-size: 100% 100%;
					margin-right: 40rpx;
				}
			}

		}
	}
}
.accountModelImg{
	max-width: 100%;
	margin: auto;
}
	
</style>